<template lang="">
  <div class="jishubowen">
    <ul class="BlogUl">
      <li class="liItem" :key="index" v-for="(item,index) in AllArticle" @click="GotoArticleDetail(item.id)">
        <div class="img">
          <img v-lazy="item.pic_url" alt="">
        </div>
        <div class="title">{{item.title}}</div>
        <div class="brief">{{item.content}}</div>
        <div class="tag">
          <el-tag v-if="item.class_name01">{{ item.class_name01 }}</el-tag>
          <el-tag v-if="item.class_name02" type="success">{{item.class_name02 }}</el-tag>
          <el-tag v-if="item.class_name03" type="info">{{ item.class_name03}}</el-tag>
        </div>
        <div class="Item-end">
          <span>+文章阅读</span>
          <span class="timer">{{item.create_time}}</span>
          <span class="like"><i class="iconfont  My-new-icondianzan"></i>{{item.like_count}}</span>
        </div>
      </li>
    </ul>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage" :page-sizes="[3,6,9,12]" :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
    </el-pagination>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 6 // 每页条数
                },
                //文章列表
                AllArticle: []
            }
        },
        methods: {
            getArticle() {
                this.$axios.get('/article', {
                    params: {
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage
                    }
                }).then(res => {
                    if (res.data.state == 200) {
                        this.page.total = res.data.count
                        this.AllArticle = res.data.result
                        console.log(res.data.result);
                    }
                })
            },
            // 每页显示条数改变 就会触发这个函数
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.getArticle()
            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.getArticle()
            },
            // 去文章详情
            GotoArticleDetail(id) {
                this.$router.push({
                    name: 'detail',
                    params: {
                        id: id
                    }
                })
            }
        },
        mounted() {
            this.getArticle()
        },

    }
</script>
<style lang="less">
    .BlogUl {
        display: flex;
        flex-wrap: wrap;
        .liItem {
            padding: 15px;
            width: 32%;
            margin: 10px 5px;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 5px;
            border: 1px solid rgba(153, 149, 149, 0.3);
            .img {
                width: 100%;
                height: 150px;
                overflow: hidden;
                border-radius: 5px;
                img {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    transition: all 0.6s;
                }
                img:hover {
                    transform: scale(1.2);
                }
            }
            .tag {
                margin: 10px 0;
                .el-tag {
                    margin-right: 10px;
                }
            }
            .title {
                font-size: 20px;
                font-weight: 600;
                margin: 10px 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .brief {
                font-size: 14px;
                margin-bottom: 15px;
                color: rgb(107, 107, 107);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-height: 25px;
                overflow: hidden;
            }
            .Item-end {
                .like {
                    float: right;
                }
            }
            .timer {
                font-size: 14px;
                color: rgb(107, 107, 107);
            }
            .Item-end span:first-of-type {
                color: rgb(29, 202, 218);
                margin-right: 10px;
            }
        }
        .liItem:hover {
            box-sizing: border-box;
            box-shadow: 0px 2px 10px 3px rgba(179, 177, 177, 0.5);
        }
    }
    
    .iconfont {
        margin-right: 3px;
    }
</style>